define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'template', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Table, Form, Template, Echarts) {

    var Controller = {
        index: function () {
            //这句话在多选项卡统计表时必须存在，否则会导致影响的图表宽度不正确
            $(document).on("click", ".charts-custom a[data-toggle=\"tab\"]", function () {
                var that = this;
                setTimeout(function () {
                    var id = $(that).attr("href");
                    var chart = Echarts.getInstanceByDom($(id)[0]);
                    chart.resize();
                }, 0);
            });

            Table.api.init({
                extend: {
                    index_url: 'data/analysis/index',
                    add_url: '',
                    edit_url: '',
                    multi_url: '',
                }
            });


            var table = $("#table");

            Table.api.bindevent(table);

            // 订单总流水和店铺总成本展示
            var totalOrderChart = Echarts.init(document.getElementById('total-order-chart'), 'walden');

            // 店铺收益展示
            var shopProfitChart = Echarts.init(document.getElementById('shop-profit-chart'), 'walden');

            // 棋牌流水
            var qpOrderChart = Echarts.init(document.getElementById('qp-order-chart'), 'walden');

            // 台球流水
            var tqOrderChart = Echarts.init(document.getElementById('tq-order-chart'), 'walden');

            // 美团流水
            var mtOrderChart = Echarts.init(document.getElementById('mt-order-chart'), 'walden');

            // 抖音流水
            var douOrderChart = Echarts.init(document.getElementById('dou-order-chart'), 'walden');

            // 余额流水
            var balanceOrderChart = Echarts.init(document.getElementById('balance-order-chart'), 'walden');

            // 充值流水
            var chargeOrderChart = Echarts.init(document.getElementById('charge-order-chart'), 'walden');

            // 团购券流水
            var tuanOrderChart = Echarts.init(document.getElementById('tuan-order-chart'), 'walden');

            function newData(shop_id,date) {
                $.ajax({
                    url: "/admin/data/shopmonthdata/index",
                    type: "POST",
                    data: {"shop_id": shop_id, "date": date},
                    dataType: "json",
                    success: function (re) {
                        console.log('返回的值：'+JSON.stringify(re));

                        // 配置总流水
                        var optionTotal = {
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['总流水']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    data:  re.x,
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '总流水',
                                    data: re.y.total,
                                    type: 'line',
                                    itemStyle: {normal: {label: {show: true}}}
                                }]
                            };
                        // 使用刚指定的配置项和数据显示图表。
                        totalOrderChart.setOption(optionTotal);

                        // 配置店铺收益
                        var optionProfit = {
                                tooltip: {
                                    trigger: 'axis'
                                },
                                legend: {
                                    data: ['小程序收益曲线']
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                toolbox: {
                                    feature: {
                                        saveAsImage: {}
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    data:  re.x_profit,
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    name: '小程序收益曲线',
                                    data: re.y_profit,
                                    type: 'line',
                                    itemStyle: {normal: {label: {show: true}}}
                                }]
                            };
                        // 使用刚指定的配置项和数据显示图表。
                        shopProfitChart.setOption(optionProfit);

                        // 配置棋牌流水
                        var optionQp = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['棋牌流水']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data:  re.x,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '棋牌流水',
                                data: re.y.qp,
                                type: 'line',
                                itemStyle: {normal: {label: {show: true}}}
                            }]
                        };
                        qpOrderChart.setOption(optionQp);

                        //配置台球流水
                        var optionTp = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['台球流水']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data:  re.x,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '台球流水',
                                data: re.y.tq,
                                type: 'line',
                                itemStyle: {normal: {label: {show: true}}}
                            }]
                        };
                        tqOrderChart.setOption(optionTp);

                        // 美团流水
                        var optionMt = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['美团流水']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data:  re.x,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '美团流水',
                                data: re.y.mt,
                                type: 'line',
                                itemStyle: {normal: {label: {show: true}}}
                            }]
                        };
                        mtOrderChart.setOption(optionMt);

                        // 抖音流水
                        var optionDou = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['抖音流水']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data:  re.x,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '抖音流水',
                                data: re.y.dou,
                                type: 'line',
                                itemStyle: {normal: {label: {show: true}}}
                            }]
                        };
                        douOrderChart.setOption(optionDou);

                        // 余额流水
                        var optionBalance = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['余额流水']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data:  re.x,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '余额流水',
                                data: re.y.balance,
                                type: 'line',
                                itemStyle: {normal: {label: {show: true}}}
                            }]
                        };
                        balanceOrderChart.setOption(optionBalance);

                        // 充值流水
                        var optionCharge = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['充值流水']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data:  re.x,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '充值流水',
                                data: re.y.charge,
                                type: 'line',
                                itemStyle: {normal: {label: {show: true}}}
                            }]
                        };
                        chargeOrderChart.setOption(optionCharge);

                        // 团购券流水
                        var optionTuan = {
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['团购券流水']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data:  re.x,
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                name: '团购券流水',
                                data: re.y.tuan,
                                type: 'line',
                                itemStyle: {normal: {label: {show: true}}}
                            }]
                        };
                        tuanOrderChart.setOption(optionTuan);

                        //订单总流水赋值
                        $('#total_amount').text(re.totalAmount);

                        //小程序收益
                        $('#total_profit').text(re.totalProfit);

                        //订单总数赋值
                        $('#orders').text(re.totalCounts);

                        //棋牌-订单流水赋值
                        $('#qp_amount').text(re.qpAmount);

                        //台球-订单总流水赋值
                        $('#tq_amount').text(re.tqAmount);

                        //美团-订单总流水赋值
                        $('#mt_amount').text(re.totalMtAmount);

                        //抖音-订单总流水赋值
                        $('#dou_amount').text(re.totalDouAmount);

                        //棋牌-复购占比
                        $('#qp_ratio').text(re.qpRepeatUserRatio);

                        //台球-复购占比
                        $('#tq_ratio').text(re.tqRepeatUserRatio);

                    }
                });
            }

            // $('#btn').click(function () {
            //     var shop_id = $("#shop_id").val();
            //     var date = $(".datetimepicker").val();
            //     if(date === ''){
            //         alert('需要选择具体月份');
            //         return false;
            //     }
            //     if(shop_id === ''){
            //         alert('需要选择具体店铺');
            //         return false;
            //     }
            //     newData(shop_id,date);
            // });
            //
            // // 重置后表格清零
            // $('#reset').click(function () {
            //     $("#table tr:not(:first)").empty();
            //     $('#table').refresh();
            // });

            $('#btn').click(function () {
                var shop_id = $("#shop_id").val();
                var date = $(".datetimerange").val();
                var switch_ipt = $("#c-switch").val();
                var num = $("#c-num").val();
                if(date === ''){
                    alert('需要选择具体起止时间');
                    return false;
                }
                if(shop_id === ''){
                    alert('需要选择具体店铺');
                    return false;
                }

                if(switch_ipt != '1'){
                    num = 1;
                }
                layer.msg('加载中...', {icon: 16, shade: 0.01, time: 10 * 1000});
                newData(shop_id,date);
                layer.closeAll();
            });

            // 重置后表格清零
            $('#reset').click(function () {
                $("#table tr:not(:first)").empty();
                $('#table').refresh();
            });

            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});
